<style>
table{
margin-top : 10px;
text-align: center;
border-collapse: collapse;
width: 100%;
}

#main-frbMessage-main-inbox{
height : 195px;
overflow: auto;
background-color: #d5d5d5;
}

table #table-title{
color : #595653	;
height: 30px;
background-color: white;
}

table td{
padding-left : 20px;
padding-right: 20px;
cursor : pointer;
margin-bottom: 2px;
}


table .click-to-view:hover{
background-color: #2DACBF;
color : white;
}
#main-frbMessage-message{
background-color: #d5d5d5;
margin-top: 20px;
padding : 20px;
}

#main-frbMessage-message-content p{
overflow: auto;
text-align : justify;
margin-top: 6px;
margin-left: 30px;	

}

#main-frbMessage-message div{
margin-bottom: 10px;
font-size: 14px;
color : #595653;
}

.new-message-eq-1{
color : black;
}

.new-message-eq-0{
color : grey;
}

#main-frbMessage-main{
background-color: white;
width : 900px;
margin-left : auto;
margin-right: auto;
padding : 10px;
}

#main-frbMessage-main-title{
color : #595653;
font-weight: bold;
font-size: 16px;
background-color: #d5d5d5;
}

.text-shrink{
max-height: 20px;
width : 500px;
overflow: hidden;
display: block;
}

.text-hight{
color : black;
font-weight: bold;
}

</style>
<div id='main-frbMessage-main'>
	<div id='main-frbMessage-main-title''>Messages</div>
	<div id='main-frbMessage-main-inbox'>
		<table>
			<tr id='table-title'>
			<th> Date </th>  <th> Expéditeur </th> <th> Message </th>
			</tr>
			<?php foreach($data['mailInbox'] as $k1=>$v1): ?>
			<tr id='<?php echo $v1->mes_id; ?>' class='click-to-view new-message-eq-<?php echo $v1->mes_flag; ?>'>
				<td><?php echo $v1->mes_date; ?></td>  <td><?php echo $v1->mes_nom; ?></td>  <td class='text-shrink'><?php echo substr($v1->mes_mes, 0, 40); ?></td>
				<input type='hidden' name ='id' value='<?php echo $v1->mes_id; ?>'>
				<input type='hidden' name ='mail' value='<?php echo $v1->mes_mail; ?>'>
				<input type='hidden' name ='tel' value='<?php echo $v1->mes_tel; ?>'>
				<input type='hidden' name ='message' value='<?php echo $v1->mes_mes; ?>'>
			</tr>
			<?php endforeach; ?>
		</table>
	</div>
	<div id='main-frbMessage-message'>
		<div id='main-frbMessage-message-from'></div>		
		<div id='main-frbMessage-message-tel'></div>
		<div id='main-frbMessage-message-date'></div>
		<div id='main-frbMessage-message-content'>Message : <p></p> </div>
	</div>
</div>

<script type="text/javascript">
$(document).ready(function(){
	$('#main-frbMessage-message').hide();
	$(".click-to-view").click(function(){
		var tr = $(this)
		$('#main-frbMessage-message').fadeOut('slow', function(){
			var date = tr.children('td:eq(0)').html();
			var from = tr.children('td:eq(1)').html();
			var mail = tr.children('input:eq(1)').val();
			var tel = tr.children('input:eq(2)').val();
			var message = tr.children('input:eq(3)').val();
			alert(message);

			if(tel == "") tel="NC";
			if(mail == "") mail="NC";
			
			$('#main-frbMessage-message-from').html('De : <span class="text-hight">'+from+' &lt'+mail+'&gt</span>');
			$('#main-frbMessage-message-tel').html('Téléphone: <span class="text-hight">'+tel+'</span>');
			$('#main-frbMessage-message-date').html('Le : <span class="text-hight">'+date+'</span>');
			$('#main-frbMessage-message-content p').html('<span class="text-hight">'+message+'</span>');
			
			$('#main-frbMessage-message').fadeIn('slow');

			var url = '<?php echo $data['baseurl']; ?>admin/frbMessage/frbMessage_MainController/readMessage';
			var id = tr.attr('id');
			var postData = tr.children('input').serialize();
			$.ajax({
				type : 'POST',
				url: url,
				cache: false,
				data: postData,
				success: function(html){
					tr.attr('class', 'click-to-view new-message-eq-0');
				}
			});
		});	
	});
});
</script>